<!doctype html>
<html lang="en-US">
<head>
  <meta charset="UTF-8" />
  <title>ApiCat</title>
  <link rel="shortcut icon" href="/assets/favicon.ico" type="image/x-icon">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description"
    content="An efficient API document management tool that fully complies with the OpenAPI specification and incorporates advanced LLM technology. Automatically generate API documents, data models and test cases, greatly improving development efficiency and quality." />
    <style>
      .vertical-center,
      .vertical-bottom {
        width: 100%;
        height: 100%;
        white-space: nowrap;
      }

      .splash-container {
        color: #f8f9fa;
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      @keyframes r {
        0% {
          transform: rotate(0deg);
        }

        100% {
          transform: rotate(45deg);
        }
      }


      #splash {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        color: #fff;
        z-index: 2147483647;
      }

      #splash.hidden {
        opacity: 0;
        z-index: -1;
        visibility: hidden;
      }

      svg.spin {
        animation: r 0.2s infinite linear;
        width: 70px;
        display: inline-block;
        vertical-align: middle;
      }

      #splash svg.circular {
        display: inline;
        height: 42px;
        width: 42px;
        animation: loading-rotate 2s linear infinite;
      }

      #splash svg.circular .path {
        animation: loading-dash 1.5s ease-in-out infinite;
        stroke-dasharray: 90, 150;
        stroke-dashoffset: 0;
        stroke-width: 2;
        stroke: #006bff;
        stroke-linecap: round
      }

      @keyframes loading-rotate {
        to {
          transform: rotate(360deg)
        }
      }

      @keyframes loading-dash {
        0% {
          stroke-dasharray: 1, 200;
          stroke-dashoffset: 0;
        }

        50% {
          stroke-dasharray: 90, 150;
          stroke-dashoffset: -40px;
        }

        to {
          stroke-dasharray: 90, 150;
          stroke-dashoffset: -120px;
        }
      }
    </style>
</head>

<body>
  <div id="app" class="min-h-screen">
    <div id="splash" class="vertical-center">
      <div class="splash-container">
        <svg class="circular" viewBox="0 0 50 50">
          <circle class="path" cx="25" cy="25" r="20" fill="none"></circle>
        </svg>
      </div>
    </div>
  </div>
</body>

</html>